<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fun" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
	<meta charset="UTF-8">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>卡列表</title>
	<link rel="stylesheet" href="css/base.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/handle.js"></script>
	<script type="text/javascript">
		var unbindCardNo = "";// 解绑的卡号
		var r = ${result};
		var list = [];
		for (var i = 0; i < r.object.length; i++) {
			var obj = r.object[i];
			var vpl = obj.vehiclePlate; //车牌号
			var cardtype = obj.cardType == 1 ? "储值卡" : "记账卡";	// 卡类型
			var limit = "" // 到期时间
			var cardNo = obj.cardNo;
			list.push([vpl,cardtype,cardNo,limit]);
		};



		// 根据卡列表的长度加载页面
		function loadCard(list) {
			console.log(list);
			if(!list) {
				return;
			}

			var clr;
			if (list.length == 0) {
				$(".nocard").removeClass('none');
				$(".wrap").addClass('none');
			}else {
				for (var i = 0; i < list.length; i++) {
					if (i%2==0) { // 卡序列号是偶数
						clr = "blue";
					}else {
						clr = "red";
					}
					var limitdate = list[i][3] ? "<img src='img/clock.png'><span>" + list[i][3] +"到期</span>" : "";
					var cardnum = "3601    "+cardNumFormat(list[i][2]); // 每4位用空格分隔
					var innerText = "<div class='card_wrap card_wrap_"+ clr +"' data-cardNo='"
							+ list[i][2]
							+"'>"
							+"<h3> <i class = 'icon_card '></i>"
							+ list[i][0]
							+"<span>"
							+"赣通卡 <i>"
							+ list[i][1]
							+"</i>"
							+"</span></h3>"
							+"<h4>"
							+ cardnum
							+"</h4>"
							+ "<h5>"+limitdate
							+"</h5></div>";
					$(".card_list").append(innerText);
				};
				$(".nocard").addClass('none');
				$(".wrap").removeClass('none');
			}
		}

		$(function () {
			loadCard(list); // 绘制卡列表的dom

			// 点击卡片弹出提示框
			$("body").on("click", ".card_wrap", function(e) {
				unbindCardNo = $(this).attr("data-cardno");
				$(".mask_layer").removeClass('none')
				$(".unbind_box").animate({
							bottom: 0},
						100, function() {

						});
			});

			// 点击解绑 解绑卡片
			$("#unbindCard").click(function(e) {
				$(".mask_layer").addClass('none')
				$(".unbind_box").animate({
							bottom: -139},
						100, function() {

						});
				unBindCard(unbindCardNo, function () {
					console.log(unbindCardNo)
					// 发请成功后的操作
					$(".card_wrap[data-cardNo=" + unbindCardNo + "]").slideUp(300, function(e) {
						$(this).remove();
						if ($(".card_list").children().length == 0) {
							$(".nocard").removeClass('none');
							$(".wrap").addClass('none');
						}
					});
				});
			});

			// 点击取消，收起弹出框
			$(".cancelBtn").click(function(e) {
				$(".unbind_box").animate({
							bottom: -139},
						100, function() {
							$(".mask_layer").addClass('none')
						});
			});
		})
	</script>
</head>
<body class="ed" style = "position:relative">
<div class="wrap cardmng_wrap">
	<div class="card_list">
	</div>
	<div class="addCardBtn" onclick="javascript:window.location.href = 'card/toCardAddPage?fromPage=${fromPage}'">
		<img src="img/add_blue.png">绑定赣通卡
	</div>
</div>
<div class="mask_layer none" >
	<div class="unbind_box">
		<p class="unbindBtn" id="unbindCard">解绑赣通卡</p>
		<p class="cancelBtn">取消</p>

	</div>
</div>
<div class="nocard">
	<img src="img/nobindcard.png">
	<h3>你没有绑定任何赣通卡哦</h3>
	<p onclick="javascript:window.location.href = 'card/toCardAddPage?fromPage=${fromPage}'">立即绑定</p>
</div>
<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
<div class="toast toast_error" style="display:none">信息输入有误</div>
<div class="loading" style="display:none">
	<img src="img/loading.gif"></div>
</body>
</html>